// 点击了描述
const handleClickTitle = (event) => {
  console.log('click', event.target.getAttribute('title'))
}
// 点击了描述
const handleClickDes = (event) => {
  console.log('click', event.target.getAttribute('des'))
}
// 添加条件
const handleAddCondition = (event) => {
  console.log('handleAdd', JSON.parse(event.target.getAttribute('item')))
}
// 添加加号
const handleAddIcon = (event) => {
  console.log('handleAdd', JSON.parse(event.target.getAttribute('item')))
}
 

// 创建单个卡片
 const creatCard = (item) => {
  console.log('itemxxxxx', item)
  return (
    <div>
      <div
        class="title"
        style={{ background: item.role.bgColor }}
        title={item.title}
        onClick={handleClickTitle}
      >
        {item.name}
      </div>
      {/* 描述 */}
      <div class="des" title={item.des} onClick={handleClickDes}>
        {item.des}
      </div>
    </div>
  )
}

// 获取水平线样式
 export const getFlatLineStyle = (item, brother) => {
    const styleConfig = {
      2: ['right', 'left'],
      3: ['right', 'middle', 'left']
    }

    const index = brother.findIndex((_item) => JSON.stringify(item) === JSON.stringify(_item))

    return (styleConfig[brother.length] && styleConfig[brother.length][index]) || ''
  }

  // 创建卡片节点
  export const createNode = (item) => {
    const isRoot= item.type === 'start' // 是否是根节点

    return (
      <div class="item">
    
        <div class="top-line" v-show={!isRoot}></div>
        {/* 角色 */}
        {creatCard(item)}
        {/* 连线下箭头 */}
        <div class="bottom-line">
          {/* 加号 */}
          <div class="add-btn-icon" item={JSON.stringify(item)} onClick={handleAddIcon}>
            +
          </div>
          <div class="triangle"></div>
          {/* 添加条件按钮 */}
          <div class="add-btn" item={JSON.stringify(item)} onClick={handleAddCondition}>
            添加条件
          </div>
        </div>
      </div>
    )
  }